<template>
  <div>
    <h5>导航栏</h5>
    <el-menu
      style="width: 200px"
      default-active="1"
      class="el-menu-vertical-demo"
      router
    >
      <el-menu-item index="/user" v-if="isUserOption">
        <span v-text="userText"></span>
      </el-menu-item>
      <el-menu-item index="/role" v-if="isRoleOption">
        <span>角色管理</span>
      </el-menu-item>
<!--      <el-menu-item index="/menu" v-if="isMenuOption">-->
<!--        <span>菜单管理</span>-->
<!--      </el-menu-item>-->
      <el-menu-item index="/datachinacity" v-if="isDataOption">
        <span>疫情数据管理</span>
      </el-menu-item>

      <el-menu-item index="/bigScreen" v-if="isBigScreen">
        <span>大屏显示</span>
      </el-menu-item>
<!--      <el-menu-item index="/predictParam">-->
<!--        <span>预测参数</span>-->
<!--      </el-menu-item>-->
      <el-menu-item index="/test" v-if="isTest">
        <span>测试菜单</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      userText: '用户管理',
      roles: [],
      isUserOption: false,
      isRoleOption: false,
      isMenuOption: false,
      isTest: false,
      isBigScreen: false,
      isDataOption: false
    };
  },

  created() {
    this.setup().then((roles) => {
      this.isUserOption = roles.find((role) => {
        return role == "ROLE_userOption";
      });
      this.isRoleOption = roles.find((role) => {
        return role == "ROLE_roleOption";
      });
      this.isMenuOption = roles.find((role) => {
        return role == "ROLE_menuOption";
      });
      this.isTest = roles.find((role) => {
        return role == "ROLE_test";
      });
      this.isBigScreen = roles.find((role) => {
        return role == "ROLE_bigScreen";
      });
      this.isDataOption = roles.find((role) => {
        return role == "ROLE_dataChinaCity";
      });
    });
  },
  computed: {},
  methods: {
    setup() {
      return new Promise((resolve, rejected) => {
        var authorities = null;
        // 拿到vuex或浏览器会话储存里的用户授权信息
        if(this.$store.state.loginModule.currentUser.username){
          authorities = this.$store.state.loginModule.currentUser.authorities;
        }else if(window.sessionStorage.getItem('user')){
           let user = window.sessionStorage.getItem('user')
          authorities = JSON.parse(user).authorities
        }

        for (const role of authorities) {
          this.roles.push(role.authority);
        }
        console.log("roles", this.roles);
        resolve(this.roles);
      });
    },
  },
  updated() {},
};
</script>

<style scoped>
</style>